<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>常用PC端banner-Swiper</title>
    <link rel="stylesheet" href="css/swiper.min.css">
     <meta name="Anthor" content="月影-253737688" />
    <style>
   body {
	background: #eee;
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	color: #000;
	margin: 0;
	padding: 0;  }

.pc-banner {

	width: 100%;
	float: left;
}

.swiper-container {
	width: 100%;
	margin: 35px 0;
}


.swiper-slide img {
	width: 100%;

	display: block;
}



.button {
	width: 70%;
	margin: 0 auto;
	bottom: 100px;
	position: relative;
}


.button div:hover {
	background-color: #2f4798;
}

.swiper-button-prev {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l4.2%2C4.2L8.4%2C22l17.8%2C17.8L22%2C44L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") #00a0e9 center 50%/50% 50% no-repeat;
}

.swiper-button-next {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L5%2C44l-4.2-4.2L18.6%2C22L0.8%2C4.2L5%2C0z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E") #00a0e9 center 50%/50% 50% no-repeat;
}

    </style>
</head>
<body>
    <!-- Swiper -->
 <section class="pc-banner">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide-center none-effect"><a href="#"><img src="images/top_hero_conc_2017.jpg" ></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/top_hero_cs_2017.jpg" ></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/top_hero_cw_im17.jpg" ></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/top_hero_hakko.jpg" ></a></div>
            <div class="swiper-slide"><a href="#"><img src="images/top_hero_karadacalpis_im02.jpg" ></a></div>
        </div>
        
    </div>

	<div class="button">
     <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div></div>
</section>
    <!-- Swiper JS -->
    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
	window.onload = function() {
    var swiper = new Swiper('.swiper-container',{
		autoplay:3000,
		speed:1000,
		autoplayDisableOnInteraction : false,
		loop:true,
		centeredSlides : true,
        spaceBetween : 20,
		slidesPerView:2,
		paginationClickable:true,
		prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',

		});
		}
    </script>
</body>
</html>